<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>阻止冒泡</title>
	<style>
		div{
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<div class="one">1
		<div class="twe">2
			<div class="three">3</div>
		</div>
	</div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
</body>
<script>
	window.onload = function(){
		var one = document.getElementsByClassName("one");
		var twe = document.getElementsByClassName("twe");
		var three = document.getElementsByClassName("three");
		one[0].onclick = function(e){
			console.log(1);
			
			// window.event? window.event.cancelBubble = true : e.stopPropagation();
		}
		twe[0].onclick = function(e){
			console.log(2);
			e.stopPropagation()
			// window.event? window.event.cancelBubble = true : e.stopPropagation();
		}
		three[0].onclick = function(e){
			console.log(3);
			// window.event? window.event.cancelBubble = true : e.stopPropagation();
		}
	}
</script>
</html>